<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div slot="header">
          <PageTools>
            <template #after>
              <el-button type="primary" size="small" @click="addFn">
                添加员工
              </el-button>
            </template>
          </PageTools>
        </div>
        <div>
          <el-table
            :data="formList"
            border
            style="width: 100%"
          >
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column label="操作">
              <template v-slot="{row}">
                <el-button type="primary" @click="settingoles(row.id)">设置角色</el-button>
                <el-button @click="getFn(row.id)">编辑</el-button>
                <el-button type="danger" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <Addyuangong
        ref="addyuangong"
        :show-dialog.sync="visibleDilog"
        @updateEvent="getyuangongList"
        @updateTotal="getyuangongTotal"
      />
      <Settingroles
        ref="settingroles"
        :show-dialog.sync="showDialog"
        @updateEvent="getyuangongList"
      />
      <Editpopover
        ref="editpopover"
        :show-dialog.sync="showvisible"
        @updateedit="getyuangongList"
      />
    </div>
  </div>
</template>
<script>
import { getyuangongList, getyuangongTotal, usersRoles } from '@/api/yuangong'
import Addyuangong from './components/addyuangong.vue'
import Settingroles from './components/setting-roles.vue'
import Editpopover from './components/edit-popover.vue'
export default {
  components: { Addyuangong, Settingroles, Editpopover },
  data() {
    return {
      formList: [], // 员工列表数据
      limit: 2, // 每页请求数量
      start: 0, // 页码
      total: 0, // 员工总数量
      visibleDilog: false, // 控制新增权限弹窗显示隐藏
      showDialog: false, // 控制设置角色弹窗显示隐藏
      showvisible: false // 控制编辑角色弹窗显示隐藏
    }
  },
  created() {
    // 更新页面数据
    this.getyuangongList()
    // 更新员工数量
    this.getyuangongTotal()
  },
  methods: {
    // 删除功能
    delFn(id) {
      this.$confirm('确定删除吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 根据id删除经纪
        await usersRoles(id)
        if (this.formList.length === 1 && this.start !== 0) {
          this.start--
        }
        // 更新页面数据
        this.getyuangongList()
        // 更新员工数量
        this.getyuangongTotal()
      }).catch(err => {
        console.log('点击了取消按钮 或者 then中的代码报错：', err)
      })
    },
    // 编辑功能
    getFn(id) {
      this.showvisible = true
      this.$refs.editpopover.getUserInfoById(id)
    },
    // 设置角色
    settingoles(id) {
      this.showDialog = true
      this.$refs.settingroles.getUserInfoById(id)
    },
    // 绑定添加事件
    addFn() {
      this.visibleDilog = true
    },
    // 获取员工数量
    async getyuangongTotal() {
      const res = await getyuangongTotal()
      // console.log(66, res)
      this.total = res.data
    },
    // 分页 页码发生改变时触发
    currentChange(val) {
      console.log(55, val)
      this.start = (val - 1) * 2
      this.getyuangongList()
    },
    // 获取员工数据列表
    async getyuangongList() {
      const res = await getyuangongList({
        _limit: this.limit,
        _start: this.start
      })
      console.log(99, res)
      // 保存员工列表
      this.formList = res.data
    }
  }
}
</script>

<style>

</style>

